<template>
  <!--天气监控组件-->
  <!--实现思路：采用百度地图国内天气查询服务api-->
  <div class="visual-container">
    <!-- 头部 -->
    <header>
      <h1>机场天气监控</h1>
      <div class="clock">
        <Clock></Clock>
      </div>
    </header>
    <!-- 页面主体部分 -->
    <div>
      <section class="main-box">
        <div class="column">
          <!-- 天气现象：text 风力等级：wind_class 风向描述：wind_dir  -->
          <div class="panel-top">
            <div class="now">
              <!--图标和值-->
              <div class="icon_value">
                <span class="now_value_top_left_1 ">{{weather_now.text}}</span>
              </div>
              <!--属性描述-->
              <div class="description">天气现象</div>
            </div>
            <div class="now">
              <div class="icon_value">
                <span class="now_icon iconfont icon-caozuo_fengsu "></span>
                <p class="now_value">{{weather_now.wind_class}}</p>
              </div>
              <!--属性描述-->
              <div class="description">风力等级</div>
            </div>
            <div class="now">
              <div class="icon_value">

                <span class="now_icon iconfont icon-fengxiang"></span>
                <p class="now_value">{{weather_now.wind_dir}}</p>
              </div>
              <!--属性描述-->
              <div class="description">风向</div>
            </div>
            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>

          <!--中间panel-->
          <div class="panel-middle-1">
            <h3>未来24小时风速监测</h3>
            <div class="wind_class_forecast_hours_chart"></div>
            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>

          <div class="panel-bottom-1">

            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>

        </div>
        <div class="column">
          <!-- 云量：clouds 能见度：vis-->
          <div class="panel-top">
            <div class="now">
              <div class="icon_value">
                <span class="now_icon iconfont icon-yun "></span>
                <p class="now_value_middle">{{weather_now.clouds}}</p>
              </div>
              <!--属性描述-->
              <div class="description">云量</div>
            </div>
            <div class="now">
              <div class="icon_value">
                <span class="now_icon iconfont icon-guangzhao"></span>
                <p class="now_value_middle">{{weather_now.vis}}</p>
              </div>
              <!--属性描述-->
              <div class="description">能见度</div>
            </div>
            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>
          <div class="panel-middle-2">
            <h3>未来24小时气温监测</h3>
            <div class="temp_forecast_hours_chart"></div>
            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>
          <div class="panel-bottom-2">

            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <!--温度：temp 湿度：rh 降水量：prec_1h-->
          <div class="panel-top">
            <div class="now">
              <div class="icon_value">
                <span class="now_icon iconfont icon-wendu"></span>
                <p class="now_value">{{weather_now.temp}}</p>
              </div>
              <!--属性描述-->
              <div class="description">温度</div>
            </div>
            <div class="now">
              <div class="icon_value">
                <span class="now_icon iconfont icon-IOTtubiao_huabanfuben"></span>
                <p class="now_value">{{weather_now.rh}}</p>
              </div>
              <!--属性描述-->
              <div class="description">湿度</div>
            </div>
            <div class="now">
              <div class="icon_value">
                <span class="now_icon iconfont icon-jiangshuiliang"></span>
                <p class="now_value">{{weather_now.prec_1h}}</p>
              </div>
              <!--属性描述-->
              <div class="description">降水量</div>
            </div>
            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>
          <div class="panel-middle-3">
            <h3>未来24小时降水监测</h3>
            <div class="prec_1h_forecast_hours_chart"></div>
            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>
          <div class="panel-bottom-3">

            <!-- 用于绘制底部边框四角 -->
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>
    </div>

  </div>
</template>

<script>
  import Clock from '../components/flights_monitor/Clock'

  export default {
    name: 'airport_weather_monitor',
    components: {
      Clock: Clock
    },
    data(){
      return {
        weather_now: {
          text: '多云',
          clouds: '999999',
          vis: '3471',
          wind_class: '2级',
          wind_dir: '东风',
          temp: '12',
          rh: '73',
          prec_1h: '0',
        }
      }
    }
  }
</script>

<style lang="less" scoped>

  .main-box {
    display: flex;
    height: 960px;
    min-width: 1000px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0rem 0.125rem 0rem;

    .column {
      flex: 3;
    }

    // 最上面一排panel
    .panel-top {
      position: relative;
      display: flex; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 148px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
      }

      .now {
        position: relative;
        flex: 3;
        padding: 10px 10px 10px;

        .icon_value {
          position: relative;
          height: 80px;
          width: 100%;
          .iconfont {
            font-size: 70px;
            color: white;
          }
          .now_icon {
            position: absolute;
            width: 100px;
            height: 70px;
            text-align: center;

          }
          .now_value {
            position: absolute;
            left: 100px;
            width: 80px;
            height: 70px;
            margin: 0;
            color: white;
            text-align: center;
            font-size: 40px;
          }
          .now_value_top_left_1 {
            position: absolute;
            width: 100%;
            height: 70px;
            margin: 0;
            color: white;
            text-align: center;
            font-size: 40px;
          }
          .now_value_middle {
            position: absolute;
            left: 100px;
            width: 180px;
            height: 80px;
            margin: 0;
            color: white;
            text-align: center;
            font-size: 50px;
          }
        }

        .description {
          position: relative;
          height: 40px;
          width: 100%;
          text-align: center;
          font-size: 30px;
          color: #E6A23C;
        }
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }

    // 中间左一panel
    .panel-middle-1 {
      position: relative; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 318px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h3 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        margin: 0;
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }

    // 中间中间panel
    .panel-middle-2 {
      position: relative; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 418px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h3 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        margin: 0;
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }

    // 中间右边panel
    .panel-middle-3 {
      position: relative; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 318px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h3 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        margin: 0;
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }

    // 底部左一panel
    .panel-bottom-1 {
      position: relative; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 458px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }

    // 底部中间panel
    .panel-bottom-2 {
      position: relative; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 358px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }

    // 底部右边panel
    .panel-bottom-3 {
      position: relative; //绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      height: 458px;
      margin: 0.125rem 0.125rem 0.125rem 0.125rem;
      border: 1px solid rgba(25, 186, 139, 0.17); //边框
      background: url("../assets/images/line.png") rgba(255, 255, 255, 0.05);

      h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
      }

      // 绘制边框等四角
      // 在当前元素的内容之前插入内容。
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      // 在当前元素的内容后面插入内容。
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 面板底部
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }

        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }
  }

</style>
